<template>
  <view class="content">
    <view class="subsection">
      <view class="sub_t">
        <view
          style="margin-left: 0"
          class="sub_col"
          :class="tabIndex == 2 ? 'sub_t_ac' : ''"
          @click="selectState(2)"
        >
          位置
          <u-icon name="arrow-down" size="14" class="wicon"></u-icon>
        </view>
        <view
          class="sub_col"
          :class="tabIndex == 1 ? 'sub_t_ac' : ''"
          @click="selectState(1)"
        >
          已租
        </view>
        <view
          class="sub_col"
          :class="tabIndex == 0 ? 'sub_t_ac' : ''"
          @click="selectState(0)"
        >
          待租
        </view>
      </view>
    </view>

      <mescroll-body
        class="sub_scroll"
        ref="mescrollRef"
        @init="mescrollInit"
        top="60"
        :down="downOption"
        @down="downCallback"
        @up="upCallback"
      >
        <view
          class="duild_list"
          v-for="(item, index) in dataList"
          :key="index"
          @click="goDuildInfo(item)"
        >
          <view class="duild_intro">
            <view class="intro">
              <text>{{ item.parkName }} | {{ item.roomNum }}</text>
              <text></text>
            </view>
            <view class="intro floor">
              <!-- 不等于2的时候是生产厂房和商务办公 -->
              <view v-if="buildType == 2 || buildType == 0" class="">
                <text class="usable">面积：</text>
                <text
                  >{{
                    item.builtUpArea === null ? "0" : item.builtUpArea
                  }}m²</text
                >
              </view>
              <!-- 等于2的时候是员工公寓的入住信息 -->
              <view v-if="buildType == 1" class="">
                <text class="usable">入住信息：</text>
                <text class="rent"
                  >已住{{
										isEmpty(item.alreadyLive)?'0':item.alreadyLive
                  }}人</text
                >
                <text>/双人</text>
              </view>
              <view class="lease">
                <text class="usable">租赁状态：</text>
                <text :class="item.leaseState == 0 ? 'rent' : 'occupancy'">{{
                  item.leaseState == 0 ? "待租" : "已租"
                }}</text>
              </view>
            </view>
          </view>
          <view class="gt">
            <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
          </view>
        </view>
      </mescroll-body>

    <u-select
      v-model="show"
      cancel-color="#999999"
      confirm-color="#44D94B"
      value-name="id"
      label-name="name"
      child-name="buildingInfoVOList"
      mode="mutil-column-auto"
      :list="buiParkList"
      @cancel="cancel"
      @confirm="confirm"
    ></u-select>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      tabIndex: 2,
      data: 7,
      buildType: 0,
      dataList: [],
      downOption: {
        page: {
          num: 0,
          size: 10,
          time: null,
        },
        auto: false, //是否在初始化后,自动执行downCallback(下拉刷新的回馈); 默认true
      },
      leaseState: "",
      show: false,
      buiParkList: [],
      buildingId: "",
    };
  },
  onLoad(option) {
    this.buildType = option.type;
    this.getBuiParkList();
    this.getTitle(
      this.buildType == 0 ? "生产厂房" : this.buildType == 1 ? "员工公寓" : "商务办公"
    );
  },
  methods: {
    getTitle(title) {
      uni.setNavigationBarTitle({
        title,
      });
    },
    getBuiParkList(title) {
      let that = this;
      //联网加载数据
      this.apis.commonApi
        .buiParkListTree()
        .then((res) => {
          this.buiParkList = res.data;
        })
        .catch(() => {});
    },
    goDuildInfo(row) {
      let rows = JSON.stringify(row);
      const url = "";
      // 确定详细信息的跳转
      if (this.buildType == 0) {
        uni.navigateTo({
          url: "./factoryInfo?row=" + rows,
        });
      } else if (this.buildType == 1) {
        uni.navigateTo({
          url: "./factoryInfo?row=" + rows,
        });
      } else {
        uni.navigateTo({
          url: "./detailsInfo?row=" + rows,
        });
      }
    },
    selectState(state) {
      this.tabIndex = state;
      this.dataList = [];
      this.leaseState = state;
      if (state == 2) {
        this.leaseState = "";
        this.show = true;
        this.mescroll.resetUpScroll();
      } else {
        this.mescroll.resetUpScroll();
      }
    },
    /*下拉刷新的回调 */
    downCallback() {
			this.dataList = [];
      this.mescroll.resetUpScroll()
    },
    upCallback(page) {
      console.log(page)
      //联网加载数据
      this.apis.buildingApi
        .buiRoomList({
          pageNum: page.num,
          pageSize: page.size,
          roomType: this.buildType == 0 ? "厂房" : this.buildType == 1 ? "公寓" : "写字楼",
          leaseState: this.leaseState,
          buildingId: this.buildingId,
        })
        .then((res) => {
          this.dataList = this.dataList.concat(res.rows);
          this.mescroll.endBySize(res.rows.length, res.total);
        })
        .catch(() => {
          //联网失败的回调,隐藏下拉刷新的状态
          this.mescroll.endErr();
        });
    },
    confirm(e) {
      this.dataList = [];
      this.buildingId = e[1].value;
      this.mescroll.resetUpScroll();
    },
    cancel() {
      this.dataList = [];
      this.buildingId = "";
      this.mescroll.resetUpScroll();
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  padding: 0;
}

.content {
  .subsection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 20rpx 40rpx;

    .sub_t {
      z-index: 2;
      position: fixed;
      top: 0;
      /* #ifdef H5 */
      top: 88rpx;
      /* #endif */
      padding: 22rpx 40rpx;
      left: 0;
      width: 100vw;
      background: #ffffff;
      display: flex;

      .sub_col {
        box-sizing: border-box;
        // min-width: 152rpx;
        margin-left: 20rpx;
        height: 46rpx;
        background: #f2f2f2;
        border-radius: 24rpx;
        font-size: 24rpx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #333333;
        @include flexCenter;
        justify-content: space-evenly;
        .wicon {
          width: 0 !important;
        }
      }

      .sub_t_ac {
        background: rgba(68, 217, 75, 0.1);
        border: 1rpx solid #44d94b;
        color: #44d94b;
      }
    }

    view {
      width: 33%;
    }
  }

  .duild_con {
    margin-top: 48rpx;
    overflow-y: auto;
    height: 1160rpx;
  }

  .duild_list {
    padding: 30rpx;
    margin: 20rpx 20rpx 0 20rpx;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px 2px 6px rgba($color: $uni-line-shadow, $alpha: 0.7);
    border-radius: 12rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .duild_intro {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #333333;
      font-size: 26rpx;

      .intro {
        display: flex;
        font-size: 28rpx;
        justify-content: space-between;
      }

      .floor {
        font-size: 26rpx;
        margin-top: 20rpx;
        width: 614rpx;

        .usable {
          color: #999999;
        }

        // 待租
        .rent {
          color: #f74d39;
        }

        // 已租
        .occupancy {
          color: #44d94b;
        }

        .lease {
        }
      }
    }

    .gt {
      margin-left: 20rpx;
    }
  }
}
</style>
